<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head lang="zh">
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.2/css/fileinput.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.2/js/fileinput.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.2/js/locales/zh.min.js"></script>
    <title></title>
</head>
<body>
<div style="margin-left: 10px;margin-right: 10px;margin-top: 10px">

    <form id="fileUp" enctype="multipart/form-data">
        <div class="form-group">
            <label>存储桶</label>
            <select class="form-control col-md-2" name="bucketName">
                <div th:each="bucket:${bucketList}">
                    <option th:value="${bucket.bucketName}" th:text="${bucket.bucketName}"></option>
                </div>
            </select>
        </div>

        文件:<input id="file" type="file" name="file"/>
    </form>
    <br>
    <button id="upload" type="button" class="btn btn-info">上传文件</button>
    <!--<button id="upload">上传文件</button>-->


</div>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
</body>
<script type="text/javascript">
    // with plugin options
    $("#file").fileinput({'showUpload': false, 'previewFileType': 'any'});
    $(".file-drop-zone-title").html("拖拽文件到这里进行上传")
    $(".file-caption-name").attr("placeholder", "选择文件")

    $(function () {
        $("#upload").click(function () {
            var formData = new FormData($('#fileUp')[0]);

            $("#upload").attr("disabled", true);
            $("#upload").attr("class", "btn btn-block btn-default disabled");
            $("#upload").text("正在上传文件,请稍候...");
            $.ajax({
                type: 'post',
                url: "/fileUpload/",
                data: formData,
                cache: false,
                processData: false,
                contentType: false
            }).success(function (data) {
                layer.alert(data["info"], {
                        skin: 'layui-layer-molv',
                        closeBtn: 0,
                        yes: function () {
                            window.location.reload()
                        }
                    }
                )
            }).error(function () {
                alert("上传失败");
            });

        });
    });


</script>

</html>